<!--2018/12/23 20:19. by soft-->
<#assign title='部门管理'>
<#include '../header.ftl'>

<div class="record">
  <div class="layui-card">
    <div class="layui-card-header">
      <div class="pull-left">
        <button id="add_" class="layui-btn layui-btn-sm layui-btn-normal">添加</button>
      </div>
      <div class="text-right pull-right">
        <select id="college" class="form-select">
          <option value="0">皖西学院</option>
        </select>
        <form id="search-form" class="pull-right" style="margin-left: 5px;">
          <input class="form-input" name="name" placeholder="输入部门名">
          <button class="layui-btn layui-btn-sm" type="submit">搜索</button>
        </form>
      </div>
    </div>
    <div class="layui-card-body">
      <table id="depts"></table>

      <script type="text/html" id="dept-tool-s">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="showDesc">查看描述</a>
      </script>

      <script type="text/html" id="dept-tool-ed">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      </script>
    </div>
  </div>

  <script>
    layui.use(['table', 'layer', 'jquery'], function () {
      var table = layui.table;
      window.table = table;
      var layer = layui.layer;
      var $ = layui.$;

      table.render({
        elem: '#depts',
        url: '${root}/dept/page',
        page: true,
        method: 'post',
        cols: [[
          {title: '序号', type: 'numbers'},
          {title: '学院名', templet: '<span>{{d.college.name||"默认学院"}}</span>'},
          {field: 'name', title: '部门名'},
          {field: 'peoples', title: '人数'},
          {field: 'datetime', title: '创建时间', minWidth: 145},
          {title: '描述', toolbar: '#dept-tool-s'},
          {title: '操作', toolbar: '#dept-tool-ed', width: 130, unresize: true}
        ]],
        parseData: function (res) {
          return {
            code: 0,
            msg: res.message,
            count: (res.payload ? res.payload.totalElements : 0),
            data: (res.payload ? res.payload.content : 0)
          }
        }
      });

      var methods = {
        showDesc: function (data) {
          layer.open({
            title: '<b style="color: #e319b1">['+data.name+']</b> 描述',
            type: 1,
            shadeClose: true,
            area: ['400px', '220px'],
            content: '<div class="desc-box">'+data.description+'</div>'
          });
        },
        del: function (data) {
          var id = data.id;
          layer.confirm('确定删除部门<span style="color: #cb0624;">['+data.name+']</span>',
            {icon: 3, title: '删除部门'}, function (index) {
              $.post('${root}/dept/delete/' + id, function (data) {
                if (data.status === 200) {
                  setTimeout(function () {
                    layer.close(index);
                  }, 1150);
                  table.reload('depts');
                  layer.msg('删除成功！', {icon: 6, time: 1100});
                } else {
                  layer.alert(data.message, {icon: 2, title: '删除失败'});
                }
              });
            });
        },
        edit: function (data) {
          var id = data.id;
          layer.open({
            type: 2,
            title: '部门修改',
            shadeClose: true,
            offset: '200px',
            area: ['450px', '340px'],
            content: '${root}/admin/dept_change/' + id
          });
        }
      };

      table.on('tool', function (o) {
        methods[o.event](o.data);
      });

      $("#add_").click(function (e) {
        layer.open({
          type: 2,
          title: '部门添加',
          shadeClose: true,
          offset: '200px',
          area: ['450px', '340px'],
          content: '${root}/admin/dept_add'
        });
      });

      var $searchForm = $('#search-form');
      var $collegeSelect = $('#college');
      $collegeSelect.change(function (e) {
        table.reload('depts', {where: getWhere()});
      });

      $searchForm.submit(function (e) {
        e.preventDefault();
        var where = getWhere();
        if (where.name != null && where.name.length > 0) {
          table.reload('depts', {where: where});
        } else {
          layer.msg('搜索部门名不能为空！', {time: 1200});
        }
      });

      function getWhere() {
        var cgId = $collegeSelect.val();
        var name = $('[name="name"]').val().trim();
        return {collageId: cgId, name: name};
      }

      // 初始化学院下拉列表
      $.post('${root}/collage/page', {page: 1, limit: 99999}, function (data) {
        if (data.status === 200) {
          $collegeSelect.html('<option value="">全部学院</option>');
          var colleges = data.payload.content;

          for (var i = 0, j = colleges.length; i < j; i++) {
            var cog = colleges[i];
            var op = '<option value="'+cog.id+'">'+cog.name+'</option>';
            $collegeSelect.append(op);
          }
        }
      });
    });
  </script>
</div>

<#include '../footer.ftl'>
